<template>
	<view class="playback u-f u-f-column">
		<view class="navTop" v-show="!fullScreenFlag">

		</view>
		<view class="flex1 content u-f">
			<view class="left u-f-column u-f">
				<view class="tabTitle u-f-item">
					<view class="item">
						设备
						<view></view>
					</view>
				</view>
				
				<view class="leftTop flex-a-i posire mt25">
					<view class="flex-ju-c wh120-60 ra10 bg5c5c5c">组织</view>
					<view class="flex-ju-c wh120-60 ra10 colorfff bg165fff ml20">通道</view>
					<input class="bg1e1e1e flex1 mr50 height60 ml20 pl15" placeholder="输入通道名称进行搜索">
					<image mode="widthFix" class="image width45 posiab right80" src="/static/img/suosuo.png">
					</image>
				</view>
			</view>
			<view class="right u-f-column u-f">
				<view class="rightCon"></view>
				<view class="rightCaoZuo u-f-item u-f-jsb">
					<view class="u-f-item">
						<view class="anNiuItem u-f-item">
							<view class="icon">
								<image src="/static/img/playback/1.png" mode="" class="img"></image>
							</view>
							<view class="text">下载管理</view>
						</view>
						<view class="anNiuItem u-f-item">
							<view class="icon">
								<image src="/static/img/playback/2.png" mode="" class="img"></image>
							</view>
							<view class="text">标签管理</view>
						</view>
					</view>

					<view class="u-f-item ceng">
						<view class="icon">
							<image src="/static/img/playback/7.png" class="img" mode="widthFix"></image>
						</view>
						<view class="icon">
							<image src="/static/img/playback/9.png" class="img" mode="widthFix"></image>
						</view>
						<view class="icon">
							<image src="/static/img/playback/6.png" class="img" mode="widthFix"></image>
						</view>
						<view class="icon">
							<image src="/static/img/playback/8.png" class="img" mode="widthFix"></image>
						</view>
						<view class="suDu u-f-item" @click="suDuFalg = !suDuFalg">
							<view class="l u-f-justify">
								<image src="/static/img/playback/10.png" style="width: 14px;" mode="widthFix"></image>
							</view>
							<view class="c u-f-justify">
								1X
							</view>
							<view class="r u-f-justify">
								<image src="/static/img/playback/11.png" style="width: 14px;" mode="widthFix"></image>
							</view>
							<view class="list" v-if="suDuFalg">
								<view class="item u-f-justify" :key="index" :class="{item1:suDuIndex==index}"
									@click="suDuIndex = index"
									v-for="(item,index) in ['16x','8x','4x','2x','1x','1/2x','1/4x','1/8x','1/16x']">
									{{item}}
								</view>
							</view>
						</view>
					</view>

					<view class="u-f-item">
						<view class="anNiuItem u-f-item">
							<view class="icon">
								<image src="/static/img/playback/3.png" mode="" class="img"></image>
							</view>
							<view class="text">录像下载</view>
						</view>
						<view class="anNiuItem u-f-item">
							<view class="icon">
								<image src="/static/img/playback/4.png" mode="" class="img"></image>
							</view>
							<view class="text">布局</view>
						</view>
						<view class="anNiuItem u-f-item" style="margin-right: 24px;">
							<view class="icon">
								<image src="/static/img/playback/5.png" mode="" class="img"></image>
							</view>
							<view class="text">全屏</view>
						</view>
					</view>
				</view>
				<view class="rightKeDu"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				suDuIndex: 0,
				suDuFalg: false
			}
		},
		onShow() {
			window.flutter_inappwebview.callHandler('setActionBar', 'back', '录像回放', true, '', '', 'handleBack()',
				'handleClickclose()').then(function(result) {

			})
			window.handleBack = () => {
				this.back()
			}
		},
	}
</script>

<style scoped>
	/*flex*/
	.u-f,
	.u-f-item,
	.u-f-justify,
	.u-f-right,
	.u-f-bottom,
	.u-f-end,
	.u-f-jsb {
		display: flex;
	}

	.u-f-bottom {
		align-items: flex-end;

	}

	.u-f-item,
	.u-f-justify,
	.u-f-right {
		align-items: center;
	}

	.u-f-justify {
		justify-content: center;
	}

	.u-f-right {
		justify-content: flex-end;
	}

	.u-f-around {
		justify-content: space-around;
	}

	.u-f-jsb {
		justify-content: space-between;
	}

	.u-f-end {
		justify-content: flex-end;
	}

	.u-f-column {
		flex-direction: column;
	}

	.u-f-wrap {
		flex-wrap: wrap;
	}



	.cursor {
		cursor: pointer;
	}

	.singleLine {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.multipleLines {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
	}

	/* 覆盖默认样式 */
	.custom-select /deep/ .uni-select__input-text {
		color: #fff;
		/* 修改文字颜色 */
		font-size: 16px;
		/* 修改文字大小 */
		font-weight: bold;
		/* 修改文字粗细 */
	}

	.custom-select /deep/ .uni-select {
		border: none;
		background: #5c5c5c;
		border-radius: 6px;
	}
</style>
<style scoped lang="scss">
	.playback {
		width: 100%;
		height: 100vh;
		background-color: #1F1F1F;
		overflow: hidden;
		color: #fff;

		.navTop {
			padding: 0 24px 0 32px;
			background-color: #2C2C2C;
			border-bottom: 1px solid #383838;
			min-height: 35px;
		}

		.content {
			width: 100%;
			height: 100%;

			.left {
				width: 411px;
				height: 100%;
				background: #2c2c2c;

				.tabTitle {
					width: 100%;
					border-bottom: 1px solid #555555;
					height: 42px;

					.item {
						font-size: 16px;
						font-family: Microsoft YaHei, Microsoft YaHei-700;
						font-weight: 700;
						text-align: LEFT;
						color: #ffffff;
						margin-left: 24px;
						position: relative;

						view {
							width: 33px;
							height: 3px;
							background: #ffffff;
							border-radius: 15px;
							position: absolute;
							bottom: -10px;
						}
					}
				}

				.leftTop {
					padding-left: 24px;
					margin-bottom: 24px;
				}
			}

			.right {
				flex: 1;
				background-color: #212121;
				padding: 20px 12px 12px 12px;

				.rightCon {
					flex: 1;
				}

				.rightCaoZuo {
					height: 72px;
					background: #2c2c2c;

					.anNiuItem {
						padding: 10px 14px;
						border-radius: 6px;
						box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.41) inset, 0px -3px 10px 0px #818181 inset, 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
						background: #585858;
						margin-left: 24px;

						.icon {
							width: 16px;
							height: 16px;
							margin-right: 10px;
						}

						.text {
							font-size: 14px;
							font-family: Source Han Sans CN, Source Han Sans CN-500;
							font-weight: 500;
							text-align: LEFT;
							color: #ffffff;
						}
					}

					.ceng {
						.icon {
							width: 32px;
							margin: 0 10px;
						}

						.suDu {
							margin-left: 30px;
							position: relative;

							.l {
								width: 24px;
								height: 24px;
								background: #5c5c5c;
								border: 1px solid #666666;
								border-radius: 6px;
								margin: 0 5px;
							}

							.c {
								width: 47px;
								height: 24px;
								background: #1e1e1e;
								border: 1px solid #165fff;
								border-radius: 6px;
								font-size: 14px;
								font-family: Source Han Sans CN, Source Han Sans CN-500;
								font-weight: 500;
								text-align: LEFT;
								color: #ffffff;
							}

							.r {
								width: 24px;
								height: 24px;
								background: #383838;
								border: 1px solid #383838;
								border-radius: 6px;
								margin: 0 5px;
							}

							.list {
								width: 108px;
								height: 336px;
								background: #1e1e1e;
								border: 1px solid #383838;
								border-radius: 6px;
								box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
								position: absolute;
								top: -350px;
								left: 5px;

								.item {
									width: 107px;
									height: 36px;
									font-size: 14px;
									font-family: Microsoft YaHei, Microsoft YaHei-400;
									font-weight: 400;
									text-align: LEFT;
									color: #ffffff;
								}

								.item1 {
									background: #165fff;
								}
							}
						}
					}
				}

				.rightKeDu {}
			}
		}
	}
</style>